<template>
	<view>

		<!-- 扫一扫  -->

		<view class="scan-btn" @click="handleScan">
			<text class="iconfont icon-scan" style="font-size: 36rpx; color: #fff;font-weight: bold;"></text>
		</view>

		<!-- 自定义导航 -->
		<view class="custom-nav">
			<view class="nav-side">{{$store.state.app.userInfo.deliveryPersonnelName}}</view>
			<view class="nav-center">
			
			</view>
			<view class="nav-side" @click="handleLogout">
					<!-- <image src="../../static/logout.png" alt="" style="width: 20rpx; height: 20rpx;"
					@click="handleLogout" /> -->
				<text class="iconfont icon-exit" style="font-size: 24rpx; color: #fff;font-weight: bold;" ></text>
			</view>
		</view>



		<!-- Tab 区域 -->
		<view class="tab-bar">
			<view
				v-for="(tab, idx) in tabs"
				:key="tab.value"
				:class="['tab-item', activeTab === idx ? 'active' : '']"
				@tap="onTabChange(idx)"
			>
				{{ tab.label }}
			</view>
		</view>
		<!-- 配送单子分类，仅在activeTab为0时显示 -->
		<view v-if="activeTab === 0" class="sub-tab-bar">
			<view
				v-for="sub in deliverySubTabs"
				:key="sub.value"
				:class="['sub-tab-item', activeSubTab === sub.value ? 'active' : '']"
				@tap="onSubTabChange(sub.value)"
			>
				{{ sub.label }}
			</view>
		</view>
		<!-- 退货单子分类，仅在activeTab为1时显示	 -->
		<view v-if="activeTab === 1" class="sub-tab-bar">
			<view
				v-for="sub in returnTabs"
				:key="sub.value"
				:class="['sub-tab-item', activeSubTab === sub.value ? 'active' : '']"
				@tap="onSubTabChange(sub.value)"
			>
				{{ sub.label }}
			</view>
		</view>
		<!-- 订单列表 -->
		<view v-if="activeTab === 0">
			<order-list :orderList='orderList' @goDetails="goDetails" @hasServed="hasServed" @updateStatus="updateStatus"></order-list>
		</view>
		<view v-if="activeTab === 1">
			<return-list :orderList='orderList' @goDetails="goReturnDetails" @agreeRefund="agreeRefund" @refuseRefund="setRefuseRefund" @confirmDoor="confirmDoor"></return-list>
		</view>
	</view>
</template>

<script>
	import orderList from '@/components/base/order-list.vue'
	import returnList from '@/components/base/return-list.vue'
	import getList from '@/mixins/getlist.js'
	import {
		personnelOrdermanage,
		personnelDelivered,
		personnelReturnList,
		refuseRefund
	} from '../../api/index.js'
	export default {
		data() {
			return {
				tabs: [
					{ label: '配送单', value: 'delivery' },
					{ label: '退货单', value: 'return' },
					{ label: '换货单', value: 'exchange' },
					{ label: '路线规划', value: 'route' }
				],
				activeTab: 0,
				deliverySubTabs: [
					{ label: '全部', value: -1 },
					{ label: '配送中', value: 11 },
					{ label: '待签收', value: 12 },
					{ label: '已完成', value: 6 },
					{ label: '已取消', value: 9 }
				],
				// 配送单子分类
				// 退货单子分类
				returnTabs: [
					{ label: '全部',  value: -1 },
					{ label: '待审核', value: 0 },
					{ label: '已退款', value: 3 },
					{ label: '已撤销', value: 6 },
				],	
				activeSubTab: -1,
			}
		},
		components: {
			orderList,
			returnList
		},
		mixins: [getList],
		onShow() {
			this.getOrderList()
		},
		onPullDownRefresh() {
			this.loadend = false;
			this.loading = false;
			this.page = 1
			this.orderList = []
			this.getOrderList().then(res => {
				uni.stopPullDownRefresh();
			})
		
		},
		methods: {
			// 扫一扫
			handleScan() {
				 uni.navigateTo({
					url: '/pages/pickUp/pickUp'
				 })
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// clearLocations()
							uni.clearStorage()
							// 清除token
							uni.removeStorageSync('token');
							// 清除用户信息
							uni.removeStorageSync('userInfo');
							// 清除位置信息
							uni.removeStorageSync('LIn97112479');
							uni.removeStorageSync('ISSEND_POSITION');
							// 返回登录页
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},
			confirmDoor(item){
			this.page = 1;
			this.orderList = [];
			this.loadend = false;
			this.loading = false;
			this.getOrderList();// console.log(item,202);
			},
			agreeRefund(item){
				let params = {
					operateType:2,
					refundOrderNo:item.refundOrderNo,
				}
				refuseRefund(params).then(res => {
					console.log(res,105);
					this.page = 1;
					this.orderList = [];
					this.loadend = false;
					this.loading = false;
					this.getOrderList();
				})
			},
			setRefuseRefund(params){
				// console.log(params,104);
				refuseRefund(params).then(res => {
					// console.log(res,105);
					this.page = 1;
					this.orderList = [];
					this.loadend = false;
					this.loading = false;
					this.getOrderList();
				})
			},
			updateStatus(){
				this.getOrderList();
			},
			onTabChange(idx) {
				this.activeTab = idx;
				// 切换到配送单时重置子分类
				this.activeSubTab = -1;
				// 重置分页和数据，防止数据累计
				this.page = 1;
				this.orderList = [];
				this.loadend = false;
				this.loading = false;
				this.getOrderList();
			},
			onSubTabChange(val) {
				this.activeSubTab = val;
				// 重置分页和数据，防止数据累计
				this.page = 1;
				this.orderList = [];
				this.loadend = false;
				this.loading = false;
				this.getOrderList();
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/orderDetails/orderDetails?orderNo=' + item.orderNo
				})
			},
			goReturnDetails(item){
				uni.navigateTo({
					url: '/pages/returnDetails/returnDetails?refundOrderNo=' + item.refundOrderNo
				})
			},
			hasServed(code) {
				let that = this
				uni.showModal({
					title: '送达',
					content: '确认商品已送达吗？',
					success: function(res) {
						if (res.confirm) {
							personnelDelivered(code).then(ress => {
							console.log('用户点击确定',that.loading);
								if (ress.data) {
									uni.showToast({
										icon: 'none',
										title: '已送达'
									})
								}
								that.loadend = false
								that.loading = false
								that.page = 1
								that.orderList = []
								that.getOrderList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			/**
			 * 获取订单列表
			 */
			getOrderList() {
				console.log(73,this.loadend,this.loading);
				return new Promise((resolve, reject) => {
					let that = this;
					if (that.loadend) return reject();
					if (that.loading) return reject();
					that.loading = true;
					that.loadTitle = "加载更多";
					let params = {
						page: that.page,
						limit: that.limit,
						orderStatus: that.activeSubTab
					}
					 	that.getPromise(that.activeTab,params).then(res => {
						let list = res.data.list || [];
						console.log(list,85);
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
						that.page = that.page + 1;
						that.isShow = true;
						resolve(true)
					}).catch(err => {
						that.loading = false;
						that.loadTitle = "加载更多";
						reject(err)
					})
				})
			},
			getPromise(WHICH_LIST = 0,params){
				switch(WHICH_LIST){
					case 0:
						return personnelOrdermanage(params);
					case 1:
						return personnelReturnList({...params,refundStatus:params.orderStatus});
				}
				 
			}
		}
		
	}
</script>

<style scoped>
.custom-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #0066e6;
  color: #fff;
  padding: 0 24rpx;
  padding-top: var(--status-bar-height, 44px);
  padding-bottom: 20rpx;
  min-height: 88rpx;
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.nav-side {
  width: 60rpx;
  height: 100%;
  color: #fff;

}
.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
}

view > .tab-bar {
  margin-top: calc(88rpx + var(--status-bar-height, 44px));
}
.tab-bar {
	display: flex;
	flex-direction: row;
	background: #fff;
	border-bottom: 1px solid #eee;
	padding: 0 2vw;
}
.tab-item {
	flex: 1;
	text-align: center;
	padding: 18rpx 0;
	font-size: 28rpx;
	color: #333;
	position: relative;
	transition: color 0.2s;
}
.tab-item.active {
	color: #1677ff;
	font-weight: bold;
}
.tab-item.active::after {
	content: '';
	display: block;
	width: 50%;
	height: 4rpx;
	background: #1677ff;
	border-radius: 2rpx;
	position: absolute;
	left: 25%;
	bottom: 0;
}
@media (min-width: 768px) {
	.tab-bar {
		padding: 0 10vw;
	}
	.tab-item {
		font-size: 36rpx;
		padding: 32rpx 0;
	}
}
.sub-tab-bar {
	display: flex;
	flex-direction: row;
	background: #f9f9f9;
	padding: 10rpx 2vw 10rpx 2vw;
	border-bottom: 1px solid #eee;
	overflow-x: auto;
}
.sub-tab-item {
	margin-right: 16rpx;
	padding: 10rpx 18rpx;
	border-radius: 32rpx;
	background: #ededed;
	color: #666;
	font-size: 24rpx;
	transition: all 0.2s;
	white-space: nowrap;
}
.sub-tab-item.active {
	background: #1677ff;
	color: #fff;
	font-weight: bold;
}
@media (min-width: 768px) {
	.sub-tab-bar {
		padding: 24rpx 10vw 24rpx 10vw;
	}
	.sub-tab-item {
		font-size: 32rpx;
		padding: 16rpx 40rpx;
	}
}

/* 订单卡片样式建议（如 order-list 组件内） */
.order-card {
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
	margin: 18rpx 2vw;
	padding: 20rpx 18rpx;
}
.order-card + .order-card {
	margin-top: 0;
}
.order-title {
	font-size: 26rpx;
	font-weight: bold;
	color: #222;
	margin-bottom: 8rpx;
}
.order-info {
	font-size: 22rpx;
	color: #666;
	margin-bottom: 6rpx;
}
.order-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16rpx;
	margin-top: 10rpx;
}
.order-btn {
	min-width: 120rpx;
	height: 48rpx;
	line-height: 48rpx;
	padding: 0 24rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	background: #1677ff;
	color: #fff;
	border: none;
	text-align: center;
	margin: 0;
	box-sizing: border-box;
	transition: background 0.2s;
}
.order-btn.secondary {
	background: #f5f5f5;
	color: #1677ff;
	border: 1rpx solid #1677ff;
}
@media (max-width: 500px) {
	.order-btn {
		min-width: 90rpx;
		font-size: 22rpx;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 12rpx;
	}
}
.scan-btn {
  position: fixed;
  bottom: 180rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 88rpx;
  height: 88rpx;
  background: #0066e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
}
.scan-btn .iconfont {
  font-size: 44rpx;
  color: #fff;
  font-weight: bold;
}
</style>
